<script setup lang="ts">
import msg, {PositionTypeEnum} from "@/components/message";
import {ref} from "vue";
import {usePlayStore} from '@/store/play-store.ts'
import {useUserStore} from '@/store/user-store.ts'
import {useRoute} from "vue-router";
import SongListBox from "@/components/common/SongListBox.vue";

const playStore = usePlayStore()
const userStore = useUserStore()

const route = useRoute();
let listId = ref();
listId.value = route.params.listId
</script>

<template>
  <div class="love-box-root">
    <div class='content-top'>
      <div class="song-list-info">
        <div class="info-title">
          <div>
            <span>我喜欢</span>
          </div>
        </div>
        <div class="info-btn">
          <div @click="msg.warning('开发中。。。', PositionTypeEnum.TOP)"><i class="iconfont">&#xe922;</i>播放全部</div>
          <div @click="msg.warning('开发中。。。', PositionTypeEnum.TOP)"><i class="iconfont">&#xebda;</i>下载</div>
          <div @click="msg.warning('开发中。。。', PositionTypeEnum.TOP)"><i class="iconfont">&#xeb91;</i>批量操作</div>
          <div @click="msg.warning('开发中。。。', PositionTypeEnum.TOP)"><i class="iconfont">&#xe8bf;</i>播放全部</div>
        </div>
      </div>
    </div>
    <div class="list-content-box">
      <song-list-box type="love"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.love-box-root {
  .content-top {
    height: 15rem;
    width: 80vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: "HarmonyOS Sans", sans-serif;
    .song-list-info {
      flex: 1;
      height: 15rem;
      display: flex;
      flex-direction: column;
      
      .info-title {
        height: 4rem;
        display: flex;
        flex-direction: row;
        margin: 0 2rem;
        div:first-child {
          flex: 1;
          height: 5rem;
          
          span {
            color: var(--text-color);
            font-weight: bold;
            line-height: 5rem;
            font-size: 3.5rem;
            font-family: "HarmonyOS Sans", sans-serif;
          }
        }
      }
      .info-btn {
        flex: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0 2rem;
        div {
          font-size: 1.4rem;
          margin-right: 6rem;
          color: var(--text-color);;
          line-height: 3.2rem;
          width: 10rem;
          text-align: center;
          border-radius: 1.8rem;
          background: var(--text-deep-rgba-1);
        }
        
        div:first-child {
          background: var(--text-deep-rgba-2);
        }
        
        div:hover {
          background: var(--text-deep-rgba-2);
        }
      }
    }
    
    
  }
  
  .list-content-box {
    height: calc(100vh - 30.6rem);
  }
}
</style>